<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题型列表</title>
    <script src="js/vue.global.3.5.13.js"></script>
    <script src="js/axios.min.0.24.0.js"></script>
    <script src="js/index.full.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <div style="height: 50px"></div>
    <el-button type="danger" @click="delQuestions">批量删除</el-button>
    <!--数据表格-->
    <el-table :data="questions" border @select-all="selectAll" @select="selectRow">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="题目" prop="questionStem"></el-table-column>
        <el-table-column label="题型" prop="typeName"></el-table-column>
        <el-table-column label="所属试卷" prop="ename"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="toEdit(scope)">编辑</el-button>
                <el-button type="danger" size="small" @click="delQuestion(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination :total="total" background
                   :page-size="5"
                   :page-sizes="[5,10,20]"
                   layout="total,prev,pager,next,sizes,jumper"
                   @size-change="changeSize"
                   @current-change="currentPage"></el-pagination>
</div>
<script>
    var option={
        data(){
            return {
                page:1, //当前也
                size:5, //每页的大小
                total:0,//总记录数
                questions:[]
            }
        },
        methods:{
            getTableData(){
                axios.get("question/list",{params:{page:this.page,size:this.size}}).then(resp=>{
                    this.questions=resp.data.list;
                    this.total=resp.data.total;
                });
            },
            currentPage(page){
                this.page=page;
                this.getTableData();
            },
            changeSize(size){
                this.size=size;
                this.getTableData();
            },
            selectAll(all){
                this.selectRows=all;
            },
            selectRow(row){
                this.selectRows=row;
            },
            delQuestion(scope){
                // let _this=this;
                this.$confirm("您确定要删除该题型吗？").then(()=>{
                    axios.post("question/del?qid="+scope.row.qid).then(resp=>{
                        alert(resp.data.msg);
                        //更新数据
                        this.getTableData();
                    });
                });
            },
            toEdit(scope){
                let qid=scope.row.qid;
                axios.get("question/get?qid="+qid).then(resp=>{
                    sessionStorage.setItem("question",JSON.stringify(resp.data));
                    location.href="question_edit.html";
                });
            },
            delQuestions(){
                let _this=this;
                if(this.selectRows.length>0){
                    this.$confirm("确定要删除吗？").then(()=>{
                        //拼接ids=1,2,3
                        let qids=_this.selectRows[0].qid;
                        for(let i=1;i<_this.selectRows.length;i++){
                            qids+=","+_this.selectRows[i].qid;
                        }
                        axios.post("question/dels?qids="+qids).then(resp=>{
                            if(resp.data.code==200){
                                alert("删除成功！");
                                _this.getTableData();
                            }else{
                                alert("删除失败！");
                            }
                        });
                    });
                }else{
                    alert("请先选择要删除的行！");
                }
            }
        },
        created(){
            this.getTableData();
        }
    }
    var app=Vue.createApp(option);
    for(const[key,component] of Object.entries(ElementPlusIconsVue)){
        app.component(key,component);
    }
    app.use(ElementPlus,{locale:ElementPlusLocaleZhCn});
    app.mount("#app");
</script>
</body>
</html>